<template>
  <d2-container>
    <template slot="header">受理查询</template>
    <el-form :inline="true" :model="form" class="demo-form-inline">
      <el-form-item label="单位名称">
        <el-input v-model="form.depart" placeholder="单位名称"></el-input>
      </el-form-item>
      <el-form-item label="合同编号">
        <el-input v-model="form.id" placeholder="合同编号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="handleCreateCustomerClick">新增</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="danger">导出</el-button>
      </el-form-item>
    </el-form>
    <template>
      <el-table
        :data="tableData"
        style="width: 100%"
        max-height="400">
        <el-table-column
          fixed
          prop="date"
          label="序号"
          width="150">
        </el-table-column>
        <el-table-column
          prop="name"
          label="委托单编号"
          width="120">
        </el-table-column>
        <el-table-column
          prop="province"
          label="委托单位"
          width="120">
        </el-table-column>
        <el-table-column
          prop="city"
          label="器具名称"
          width="120">
        </el-table-column>
        <el-table-column
          prop="address"
          label="检测部门"
          width="300">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="检测岗位"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="套数"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="受理日期"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="检测期限"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="结账日期"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="检定员"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="小节"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="检测费"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="完成日期"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="证书打印日期"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="器具是否入库"
          width="120">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="证书是否入库"
          width="120">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="120">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="editRow(scope.$index, tableData)"
              type="text"
              size="small">
              编辑
            </el-button>
            <el-button
              @click.native.prevent="deleteRow(scope.$index, tableData)"
              type="text"
              size="small">
              移除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <div class="block">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="20"
        layout="total, prev, pager, next, jumper"
        :total="count">
      </el-pagination>
    </div>

  </d2-container>
</template>

<script>
export default {
  name: 'measure-search',
  methods: {
    deleteRow (index, rows) {
      rows.splice(index, 1)
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    },
    onSubmit () {
      console.log('submit!')
    },
    handleCreateCustomerClick () {
      this.$router.push({ name: 'market-customer-create' })
    }
  },
  data () {
    return {
      tableData: [
        {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }
      ],
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      form: {
        depart: '',
        id: ''
      }
    }
  }
}
</script>
